<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<u-icon name="arrow-left" size="20" color="#333"></u-icon>
			</view>
			<view class="nav-title">限时折扣</view>
			<view class="nav-right">
				<u-icon name="search" size="20" color="#333" @click="showSearch"></u-icon>
				<u-icon name="more-dot-fill" size="20" color="#333" @click="showMore"></u-icon>
			</view>
		</view>

		<!-- 倒计时区域 -->
		<view class="countdown-section">
			<view class="countdown-header">
				<u-icon name="clock-fill" size="20" color="#FF4444"></u-icon>
				<text class="countdown-title">限时抢购</text>
				<text class="countdown-subtitle">距离结束还剩</text>
			</view>
			<view class="countdown-timer">
				<view class="time-item">
					<text class="time-number">{{ countdown.hours }}</text>
					<text class="time-label">时</text>
				</view>
				<text class="time-separator">:</text>
				<view class="time-item">
					<text class="time-number">{{ countdown.minutes }}</text>
					<text class="time-label">分</text>
				</view>
				<text class="time-separator">:</text>
				<view class="time-item">
					<text class="time-number">{{ countdown.seconds }}</text>
					<text class="time-label">秒</text>
				</view>
			</view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-section">
			<scroll-view class="filter-scroll" scroll-x="true">
				<view class="filter-tags">
					<view 
						class="filter-tag" 
						:class="{ active: currentFilter === item.value }"
						v-for="(item, index) in filterTags" 
						:key="index"
						@click="onFilterChange(item.value)"
					>
						{{ item.label }}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 商品网格 -->
		<view class="products-grid">
			<view 
				class="product-item" 
				v-for="(item, index) in filteredProducts" 
				:key="index"
				@click="onProductClick(item)"
			>
				<image :src="item.img" class="product-img" mode="aspectFill"></image>
				<view class="product-info">
					<text class="product-title">{{ item.title }}</text>
					<view class="price-section">
						<text class="current-price">¥{{ item.price }}</text>
						<text class="original-price">¥{{ item.originalPrice }}</text>
						<text class="discount-tag">{{ item.discount }}折</text>
					</view>
					<view class="progress-section">
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: item.soldPercent + '%' }"></view>
						</view>
						<text class="progress-text">已抢{{ item.soldPercent }}%</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore">
			<u-loading-icon mode="spinner" size="20"></u-loading-icon>
			<text class="load-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentFilter: 'all',
				filterTags: [
					{ label: '全部', value: 'all' },
					{ label: '服装', value: 'clothing' },
					{ label: '数码', value: 'digital' },
					{ label: '美妆', value: 'beauty' },
					{ label: '家居', value: 'home' },
					{ label: '食品', value: 'food' }
				],
				productList: [
					{
						id: 1,
						img: '/static/logo.png',
						title: '新款夹棉保暖羊毛长款毛呢外套',
						price: '448.00',
						originalPrice: '899.00',
						discount: '5.0',
						category: 'clothing',
						soldPercent: 85
					},
					{
						id: 2,
						img: '/static/logo.png',
						title: '双排扣西装外套商务休闲',
						price: '315.00',
						originalPrice: '629.00',
						discount: '5.0',
						category: 'clothing',
						soldPercent: 72
					},
					{
						id: 3,
						img: '/static/logo.png',
						title: '抽纸6包装家用卫生纸',
						price: '9.50',
						originalPrice: '19.90',
						discount: '4.8',
						category: 'home',
						soldPercent: 95
					},
					{
						id: 4,
						img: '/static/logo.png',
						title: '羽绒服外套冬季保暖',
						price: '537.00',
						originalPrice: '1074.00',
						discount: '5.0',
						category: 'clothing',
						soldPercent: 68
					},
					{
						id: 5,
						img: '/static/logo.png',
						title: '条纹毛呢外套时尚百搭',
						price: '520.00',
						originalPrice: '1040.00',
						discount: '5.0',
						category: 'clothing',
						soldPercent: 78
					},
					{
						id: 6,
						img: '/static/logo.png',
						title: '影新款刺绣九色眼部彩妆盘',
						price: '15.50',
						originalPrice: '69.00',
						discount: '2.2',
						category: 'beauty',
						soldPercent: 92
					},
					{
						id: 7,
						img: '/static/logo.png',
						title: '单色高光钻石高光粉',
						price: '39.00',
						originalPrice: '99.00',
						discount: '3.9',
						category: 'beauty',
						soldPercent: 88
					},
					{
						id: 8,
						img: '/static/logo.png',
						title: '智能手机新品发布',
						price: '2999.00',
						originalPrice: '3999.00',
						discount: '7.5',
						category: 'digital',
						soldPercent: 45
					}
				],
				countdown: {
					hours: '12',
					minutes: '34',
					seconds: '56'
				},
				hasMore: false
			}
		},
		computed: {
			filteredProducts() {
				if (this.currentFilter === 'all') {
					return this.productList;
				}
				return this.productList.filter(item => item.category === this.currentFilter);
			}
		},
		onLoad() {
			console.log('限时折扣页面加载');
			this.startCountdown();
			this.loadLimitedDiscountProducts();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadLimitedDiscountProducts();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 加载限时折扣数据
			loadLimitedDiscountProducts() {
				console.log('加载限时折扣数据');
				
				// 模拟API调用
				// uni.request({
				//   url: 'your-api-url/limited-discount',
				//   method: 'GET',
				//   success: (res) => {
				//     this.productList = res.data;
				//   },
				//   fail: (err) => {
				//     console.error('获取限时折扣失败:', err);
				//   }
				// });
			},
			
			// 开始倒计时
			startCountdown() {
				this.countdownTimer = setInterval(() => {
					// 这里可以实现真实的倒计时逻辑
					// 目前使用模拟数据
					let seconds = parseInt(this.countdown.seconds);
					let minutes = parseInt(this.countdown.minutes);
					let hours = parseInt(this.countdown.hours);
					
					seconds--;
					if (seconds < 0) {
						seconds = 59;
						minutes--;
						if (minutes < 0) {
							minutes = 59;
							hours--;
							if (hours < 0) {
								// 倒计时结束
								clearInterval(this.countdownTimer);
								this.countdown = { hours: '00', minutes: '00', seconds: '00' };
								return;
							}
						}
					}
					
					this.countdown = {
						hours: hours.toString().padStart(2, '0'),
						minutes: minutes.toString().padStart(2, '0'),
						seconds: seconds.toString().padStart(2, '0')
					};
				}, 1000);
			},
			
			// 筛选变化
			onFilterChange(filter) {
				this.currentFilter = filter;
			},
			
			goBack() {
				uni.navigateBack();
			},
			
			showSearch() {
				uni.showToast({
					title: '搜索功能',
					icon: 'none'
				});
			},
			
			showMore() {
				uni.showToast({
					title: '更多功能',
					icon: 'none'
				});
			},
			
			onProductClick(item) {
				uni.showToast({
					title: `查看商品: ${item.title}`,
					icon: 'none'
				});
			}
		},
		
		onUnload() {
			// 页面卸载时清除定时器
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 导航栏 */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-left {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

/* 倒计时区域 */
.countdown-section {
	background: linear-gradient(135deg, #FF4444, #FF6666);
	margin: 20rpx 30rpx;
	padding: 30rpx;
	border-radius: 15rpx;
	color: #fff;
}

.countdown-header {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.countdown-title {
	font-size: 32rpx;
	font-weight: bold;
}

.countdown-subtitle {
	font-size: 24rpx;
	opacity: 0.9;
}

.countdown-timer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
}

.time-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 15rpx 20rpx;
	border-radius: 10rpx;
	min-width: 80rpx;
}

.time-number {
	font-size: 36rpx;
	font-weight: bold;
}

.time-label {
	font-size: 20rpx;
	opacity: 0.8;
	margin-top: 5rpx;
}

.time-separator {
	font-size: 32rpx;
	font-weight: bold;
}

/* 筛选区域 */
.filter-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx 30rpx;
	border-radius: 15rpx;
	padding: 20rpx;
}

.filter-scroll {
	width: 100%;
}

.filter-tags {
	display: flex;
	gap: 20rpx;
	padding-right: 20rpx;
}

.filter-tag {
	padding: 15rpx 25rpx;
	background-color: #f5f5f5;
	border-radius: 25rpx;
	font-size: 26rpx;
	color: #666;
	white-space: nowrap;
	transition: all 0.3s;
}

.filter-tag.active {
	background-color: #FF4444;
	color: #fff;
}

/* 商品网格 */
.products-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx;
	gap: 20rpx;
}

.product-item {
	width: calc(50% - 10rpx);
	background-color: #fff;
	border-radius: 15rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.product-img {
	width: 100%;
	height: 300rpx;
	background-color: #f8f8f8;
}

.product-info {
	padding: 20rpx;
}

.product-title {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 15rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.price-section {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-bottom: 15rpx;
}

.current-price {
	font-size: 32rpx;
	font-weight: bold;
	color: #FF4444;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.discount-tag {
	background-color: #FF4444;
	color: #fff;
	font-size: 20rpx;
	padding: 5rpx 10rpx;
	border-radius: 10rpx;
}

.progress-section {
	margin-top: 10rpx;
}

.progress-bar {
	width: 100%;
	height: 8rpx;
	background-color: #f0f0f0;
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 8rpx;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #FF4444, #FF6666);
	border-radius: 4rpx;
	transition: width 0.3s;
}

.progress-text {
	font-size: 22rpx;
	color: #999;
}

/* 加载更多 */
.load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx;
	gap: 15rpx;
}

.load-text {
	font-size: 26rpx;
	color: #999;
}
</style> 